
// 类组件  :rcc

// react  版本16.8之前只能接受props  不能定义状态


import React, { Component } from 'react'




export default class App extends Component {

    state = {
        title:'标题',
        num:10,
        arr:['a','b','c']
    }

    addNumber = () => {
        // 异步 this.setState
        this.setState({
            num:this.state.num + 1
        })
        console.log(this.state)
    }
    changeNumber = (n) => {
        this.setState({
            num:this.state.num + n
        })
        console.log(this.state)
    }
    addArr = () => {

    }

    // 类组件必须定义render函数  返回虚拟dom  进入组件自动执行render函数
  render() {
    console.log('执行render函数了')
    return (
      <div className='app'>
        {
            // this.state.num > 0 ? <h1>{this.state.title}</h1> : null
            
        }
        {this.state.num > 0 && <h1>{this.state.title}</h1>}


        <div>
            {this.state.num > 0?
            <>
                <button onClick={() => this.changeNumber(-1)}>-</button>
                {this.state.num}
            </>
            : null}

        {/* <h1>{this.state.title}</h1> */}
                
            <button onClick={() => this.changeNumber(1)}>+</button>
            
            
        </div> 
        <button onClick={() => {
            this.setState({
                arr:[...this.state.arr,Math.random()]
            })
        }}>添加数据</button>
        <ul>
            {this.state.arr.map((item,index) =>
                <li key={item}>{item}
                <button onClick={() => {
                    // this.setState({
                    //     arr:this.state.arr.filter(v => v !== item)
                    // })

                    const arrNew = [...this.state.arr]
                    arrNew.splice(index,1)
                    this.setState({
                        arr:arrNew
                    })

                }}>删除</button>
            </li>
            )}
            
        </ul>
      </div>



    )
  }
}

// 函数组件  :rafce
// import React from 'react'

// const App = () => {
//   return (
//     <div>App</div>
//   )
// }

// export default App

